<template>
	<layout>
		<u-navbar title="我的收藏" :background="{ 'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)' }"
			:borderBottom="false" backIconColor="#fff" titleColor="#fff"></u-navbar>

		<u-sticky>
			<u-tabs :list="tabs" :current="tabIndex" @change="changeTab" :is-scroll="false" active-color="#6563FD"
				bg-color="#F5F5F5"></u-tabs>
		</u-sticky>

		<view v-show="tabIndex === 0">
			<view v-if="tabs[tabIndex].list.length" class="pad-l-base pad-r-base">
				<view v-for="(item, index) in tabs[tabIndex].list" :key="index"
					class="h-box block-gray pad-sm mg-b-sm mg-t-sm" @click="clickMotorcadeDetail(index)">
					<view style="width: 136rpx;height: 136rpx;">
						<u-lazy-load :image="item.thumbnail" height="136" imgMode="aspectFill"
							:border-radius="20"></u-lazy-load>
					</view>
					<view class="flex-extend mg-l-xs">
						<view class="h-box justify-between">
							<text class="text-title">{{item.name}}</text>
							<view @click.stop='clickJoin(index)'
								v-if="item.minPlayers - item.currentFemaleCount - item.currentMaleCount > 0">
								<u-tag :text="'￥' + item.costPerPerson / 100 + ' 加入'" bg-color="#FF5673"
									border-color="#FF5673" color="#fff" shape="circle" size="mini"></u-tag>
							</view>
						</view>
						<view class="uni-text-gray">{{item.storeName}} | {{item.roomName}}</view>
						<view class="h-box justify-between">
							<text style="color: #6667FF;">{{ formatTimeInterval(item.startTime, item.endTime) }}</text>
							<view class="h-box"
								v-if="item.minPlayers - item.currentFemaleCount - item.currentMaleCount > 0">
								<text class="uni-text-gray">还差</text>
								<text
									style="color: #FF5673;">{{ item.minPlayers - item.currentFemaleCount - item.currentMaleCount || 0 }}</text>
								<text class="uni-text-gray">人发车</text>
							</view>
						</view>
					</view>
				</view>
				<view class="h-fill">
					<uni-load-more :status="tabs[tabIndex].listStatus"></uni-load-more>
				</view>
			</view>
			<view v-else style="margin-top: 40%;">
				<u-empty></u-empty>
			</view>
		</view>

		<view v-show="tabIndex === 1">
			<view v-if="tabs[tabIndex].list.length" class="pad-l-base pad-r-base h-box flex-wrap mg-t-sm">
				<view v-for="(item, index) in tabs[tabIndex].list" :key="index" style="width: 315rpx;" class="mg-b-sm"
					:class="{'mg-r-base': index % 2 == 0}" @click="clickScriptDetail(index)">
					<view class="pos-real">
						<view class="script-img">
							<u-lazy-load :image="item.cover" :height="315" img-mode="aspectFill"
								:border-radius='[0, 20, 20, 0]'></u-lazy-load>
						</view>
						<view class="pos-abs-l script-tag-wrapper">
							<u-lazy-load
								image="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ming_juben_da@2x.png"
								:height="315" img-mode="aspectFill" :border-radius='[20, 0, 0, 20]'></u-lazy-load>
							<view class="pos-abs-fill v-box justify-around pad-t-base pad-b-base" style="right: 20rpx;">
								<text v-for="(t, tIdx) in item.tags" :key="tIdx" :style="{color: t.color}"
									class="text-sm">{{t.name}}</text>
							</view>
						</view>
					</view>
					<view class="mg-t-sm">
						<view class="h-box justify-between">
							<text class="text-md text-bold u-line-1">{{item.name}}</text>
							<text style="color: #FF5673;">￥{{item.price / 100}}</text>
						</view>
						<view class="h-box justify-between">
							<view class="h-box">
								<image style="width: 26rpx;height: 26rpx;margin-right: 8rpx;"
									src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_renshu@2x.png">
								</image>
								<text class="uni-text-gray text-sm">{{item.standardPlayers}}</text>
							</view>
							<view class="h-box">
								<image style="width: 26rpx;height: 26rpx;margin-right: 8rpx;"
									src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_shijian@2x.png">
								</image>
								<text class="uni-text-gray text-sm">{{item.playTime}}H</text>
							</view>
							<view class="h-box">
								<image style="width: 26rpx;height: 26rpx;margin-right: 8rpx;"
									src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_nandu@2x.png">
								</image>
								<text class="uni-text-gray text-sm">{{item.difficulty}}</text>
							</view>
						</view>
						<u-line margin="10rpx 0"></u-line>
						<view style="height: 66rpx;">
							<text class="uni-text-gray text-sm u-line-2" style="line-height: 32rpx;">
								{{item.introduction}}
							</text>
						</view>
					</view>
				</view>
				<view class="h-fill">
					<uni-load-more :status="tabs[tabIndex].listStatus"></uni-load-more>
				</view>
			</view>
			<view v-else style="margin-top: 40%;">
				<u-empty></u-empty>
			</view>
		</view>

		<view v-show="tabIndex === 2">
			<view v-if="tabs[tabIndex].list.length" class="pad-l-base pad-r-base">
				<view v-for="(item, index) in tabs[tabIndex].list" :key="index"
					class="h-box block-gray pad-sm mg-b-sm mg-t-sm" @click="clickStoreDetail(index)">
					<view style="width: 180rpx;height: 126rpx;">
						<u-lazy-load :image="item.thumbnail" :height="126" img-mode="aspectFill"
							:border-radius="20"></u-lazy-load>
					</view>
					<view class="flex-extend mg-l-xs">
						<view class="h-box justify-between">
							<text class="text-title flex-extend">{{item.name}}</text>
							<image
								src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei_juli@2x.png"
								style="width: 24rpx;height: 24rpx;"></image>
							<view class="uni-text-gray u-line-1" style="width: 80rpx;">{{formatDistance(item.distance)}}
							</view>
							<image style="width: 24rpx;height: 24rpx;"
								src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_dingwei_lan@2x.png">
							</image>
						</view>
						<view class="uni-text-gray">{{item.address}}</view>
					</view>
				</view>
				<view class="h-fill">
					<uni-load-more :status="tabs[tabIndex].listStatus"></uni-load-more>
				</view>
			</view>
			<view v-else style="margin-top: 40%;">
				<u-empty></u-empty>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		getMyCollect
	} from "../api/platform/user.js"
	import util from "../common/util.js"
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'my-collect',
		data() {
			return {
				tabs: [{
					name: '车队',
					list: [],
					collectType: 'motorcade',
					listStatus: 'more',
					pageNum: 1,
					pageSize: 20,
					total: -1
				}, {
					name: '剧本',
					list: [],
					collectType: 'script',
					listStatus: 'more',
					pageNum: 1,
					pageSize: 20,
					total: -1
				}, {
					name: '门店',
					list: [],
					collectType: 'store',
					listStatus: 'more',
					pageNum: 1,
					pageSize: 20,
					total: -1
				}],
				tabIndex: 0
			}
		},
		computed: {
			...mapState(['userLocation']),
			formatTimeInterval() {
				return (startTime = 0, endTime = 0) => {
					return this.$moment(startTime).format('M月D日 ') + this.$moment(startTime).format(' k:mm') + '-' +
						this
						.$moment(endTime).format('k:mm')
				}
			}
		},
		onReady() {
			this.getData()
		},
		async onPullDownRefresh() {
			this.tabs[this.tabIndex].pageNum = 1
			this.tabs[this.tabIndex].listStatus = 'loading'
			await this.getData()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.total === this.tabs[this.tabIndex].list.length) return
			this.tabs[this.tabIndex].pageNum++
			this.tabs[this.tabIndex].listStatus = 'loading'
			this.getData()
		},
		methods: {
			async clickJoin(index) {
				let data = {
					from: 'motorcade-detail',
					motorcadeId: this.tabs[this.tabIndex].list[index]._id
				}
				uni.navigateTo({
					url: `/pagesSubscribe/create-order?data=${ encodeURIComponent(JSON.stringify(data)) }`
				})
			},

			clickMotorcadeDetail(index) {
				uni.navigateTo({
					url: "/pagesSubscribe/motorcade-detail?motorcadeId=" + this.tabs[this.tabIndex].list[index]._id
				})
			},
			clickScriptDetail(index) {
				uni.navigateTo({
					url: "/pagesSubscribe/script-detail?scriptId=" + this.tabs[this.tabIndex].list[index]._id
				})
			},
			clickStoreDetail(index) {
				uni.navigateTo({
					url: "/pagesSubscribe/store-detail?storeId=" + this.tabs[this.tabIndex].list[index]._id
				})
			},

			formatDistance: util.formatDistance,
			changeTab(index) {
				this.tabIndex = index
				this.getData()
			},

			async getData() {
				let currentTab = this.tabs[this.tabIndex]
				currentTab.listStatus = 'loading'
				try {
					// if (!this.userLocation) {
					//   let [err, loc] = await uni.getLocation({
					//     type: "gcj02"
					//   })
					//   if (err) {
					//     loc = uni.getStorageSync('userLocation')
					//   }
					//   this.userLocation = {
					//     latitude: loc.latitude,
					//     longitude: loc.longitude
					//   }
					// }
					await getMyCollect({
							showLoading: true,
							collectType: currentTab.collectType,
							pageNum: currentTab.pageNum,
							pageSize: currentTab.pageSize,
							userLocation: this.userLocation || null
						}).then(res => {
							currentTab.total = res.total
							if (!res.list.length) {
								currentTab.pageNum--
								currentTab.pageNum = currentTab.pageNum < 1 ? 1 : currentTab.pageNum
								return
							}
							if (currentTab.pageNum === 1) {
								currentTab.list = res.list
								return
							}
							currentTab.list = currentTab.list.concat(res.list)
						})
						.finally(() => {
							if (currentTab.total === currentTab.list.length) {
								currentTab.listStatus = 'noMore'
							} else {
								currentTab.listStatus = 'More'
							}
						})
				} catch (e) {
					currentTab.listStatus = 'more'
					this.$log("加载我的收藏列表遇到错误", e);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.block-gray {
		background-color: #EFF1F7;
		border-radius: 20rpx;
	}

	.script-tag-wrapper {
		width: 90rpx;
	}

	.script-img {
		padding-left: 75rpx;
		height: 315rpx;
	}
</style>